<template>
    <el-dialog v-model="drawer" destroy-on-close :show-close="false" draggable :close-on-press-escape="false" :close-on-click-modal="true" width="660px" title="选择购买用户企业">
      <el-table :data="list" stripe style="width: 100%" v-loading="tableLoading" size="small">
        <el-table-column prop="name" label="企业名称"/>
        <el-table-column prop="legalUserName" label="法人"/>
        <el-table-column prop="contactPhone" label="联系电话"/>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="onSelectEvent(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>      
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {ref, toRefs, watch, computed, reactive} from 'vue'
  
  /** 此处引入，支持多个 */
  const emit = defineEmits(['update:dialogPop', 'selEnterprise'])
  /** 定义组件入参 */
  const props = defineProps({
    dialogPop: Boolean, // 控制显示隐藏
    list: Array,
  })
  const {dialogPop, list} = toRefs(props)
  /** 双向绑定 */
  let drawer: any = computed({
    get: () => dialogPop.value,
    set: (val) => emit('update:dialogPop', val)
  })
  /** 关闭弹窗 */
  const closeEvent = () => drawer = false
  // 状态数据
  const state = reactive({
    size: 10,// 页容
    current: 1,// 当前页
    total: 0,// 记录条数据
    tableData: [],// 表格数据
  })
  // 搜索数据
  const search = ref<string>('')
  // 表格加载显示
  const tableLoading = ref<boolean>(false)
  // 点击选中某个
  const onSelectEvent = (obj: any) => {
    emit('selEnterprise', obj)
    emit('update:dialogPop', false)
  }
  
  /** 监听打开就加载 */
  watch(() => dialogPop.value, (val: any) => {
    if (val) {
      reset()
    }
  })
  // 重置数据
  const reset = () => {
    state.current = 1
    state.size = 10
    state.total = 0
    state.tableData = []
    search.value = ''
  }
  </script>
  
  <style scoped lang="scss">
  
  .page__body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  </style>
  